<template>
    <div class="find">
        <van-sticky>
        <DisTopBar :title="'发现'" :action="'发布'" :color1="'#323133'"  :color2="'#323133'" :isShow="false" :url="'/search/index'"></DisTopBar>
        </van-sticky>
        <div class="container">
        <div class="re-nav">
            <h1>课程推荐</h1>
            <router-link v-slot="{navigate}" custom to="allCourse"><span @click="navigate">全部课程</span></router-link>
        </div>
        <div class="re-course">
            <ul>
                <router-link v-slot="{navigate}" custom to="brief">
                    <li @click="navigate">
                    <div class="imgCon" >
                    <img src="../../assets/img/find/find_01.png" alt="">
                    <span>HUT燃脂跑终极课程</span>
                    </div> 
                    <div class="user_name"><img src="../../assets/img/find/heads1.png" alt=""><span>OMINI.BASS</span></div>
                    </li>
                </router-link>
                <li>
                     <div class="imgCon">
                    <img src="../../assets/img/find/find_02.png" alt="">
                    <span>马甲线养成计划初级课程</span>
                    </div> 
                    <div class="user_name"><img src="../../assets/img/find/heads2.png" alt=""><span>OMINI.BASS</span></div>

                </li>
                <li>
                    <div class="imgCon">
                    <img src="../../assets/img/find/find_03.png" alt="">
                    <span>大师进阶版哈他瑜伽</span>
                    </div> 
                    <div class="user_name"><img src="../../assets/img/find/heads3.png" alt=""><span>OMINI.BASS</span></div>

                </li>
                  <li>
                  <div class="imgCon">
                    <img src="../../assets/img/find/find_02.png" alt="">
                    <span>马甲线养成计划初级课程</span>
                    </div> 
                    <div class="user_name"><img src="../../assets/img/find/heads4.png" alt=""><span>OMINI.BASS</span></div>

                </li>
                  <li>
                    <div class="imgCon">
                    <img src="../../assets/img/find/find_04.png" alt="">
                    <span>适合小白的户外瑜伽课程</span>
                    </div> 
                    <div class="user_name"><img src="../../assets/img/find/heads4.png" alt=""><span>OMINI.BASS</span></div>
                </li>
            </ul>
        </div>
       <div class="teacher">
           <ul>
               <li>
                   <div><img src="../../assets/img/find/headb1.png" alt=""></div>
                   <div>
                       <h1>推荐教练<span><img src="../../assets/img/find/red_dot.png" alt=""></span></h1>
                       <span>OMINI.BASS</span>
                   </div>
               </li>
                <li>
                   <div><img src="../../assets/img/find/headb2.png" alt=""></div>
                   <div>
                       <h1>推荐教练<span><img src="../../assets/img/find/red_dot.png" alt=""></span></h1>
                       <span>OMINI.BASS</span>
                   </div>
               </li>
                <li>
                   <div><img src="../../assets/img/find/headb3.png" alt=""></div>
                   <div>
                       <h1>推荐教练<span><img src="../../assets/img/find/red_dot.png" alt=""></span></h1>
                       <span>OMINI.BASS</span>
                   </div>
               </li>
                <li>
                   <div><img src="../../assets/img/find/headb4.png" alt=""></div>
                   <div>
                       <h1>推荐教练<span><img src="../../assets/img/find/red_dot.png" alt=""></span></h1>
                       <span>OMINI.BASS</span>
                   </div>
               </li>
           </ul>
       </div>
       <div class="re-label">
           <h1>推荐标签</h1>
           <div class="labels" ref="spanlist">
               <span>减脂</span>
               <span>增肌</span>
               <span>力量训练</span>
               <span>马甲线</span>
               <span>瑜伽</span>
               <span>腹肌</span>
               <span>大长腿</span>
           </div>
       </div>
       <div class="course">
           <li>
            <div><img src="../../assets/img/find/find_01.png" alt=""></div>
            <div>
                <h1>马甲线养成计划初级课程</h1>
                <div><span>减脂</span><span>增肌</span></div>
                <div class="user_name"><img src="../../assets/img/find/heads1.png" alt="">&nbsp;<span>OMINI.BASS</span></div>
            </div>
           </li>  
            <li>
            <div><img src="../../assets/img/find/find_02.png" alt=""></div>
            <div>
                <h1>马甲线养成计划初级课程</h1>
                <div><span>减脂</span><span>增肌</span></div>
                <div class="user_name"><img src="../../assets/img/find/heads1.png" alt="">&nbsp;<span>OMINI.BASS</span></div>
            </div>
           </li>  
            <li>
            <div><img src="../../assets/img/find/find_03.png" alt=""></div>
            <div>
                <h1>马甲线养成计划初级课程</h1>
                <div><span>减脂</span><span>增肌</span></div>
                <div class="user_name"><img src="../../assets/img/find/heads1.png" alt="">&nbsp;<span>OMINI.BASS</span></div>
            </div>
           </li>  
            <li>
            <div><img src="../../assets/img/find/find_04.png" alt=""></div>
            <div>
                <h1>马甲线养成计划初级课程</h1>
                <div><span>减脂</span><span>增肌</span></div>
                <div class="user_name"><img src="../../assets/img/find/heads1.png" alt="">&nbsp;<span>OMINI.BASS</span></div>
            </div>
           </li>
              <li>
            <div><img src="../../assets/img/find/find_03.png" alt=""></div>
            <div>
                <h1>马甲线养成计划初级课程</h1>
                <div><span>减脂</span><span>增肌</span></div>
                <div class="user_name"><img src="../../assets/img/find/heads1.png" alt="">&nbsp;<span>OMINI.BASS</span></div>
            </div>
           </li>             
       </div>
       </div>
        <BottomBar></BottomBar>
    </div>
</template>

<script>
 import BScroll from '@better-scroll/core'
 import BottomBar from "../../component/BottomBar";
 import DisTopBar from "../../component/DisTopBar";
 import Vue from 'vue';
 import { Sticky } from 'vant';
 Vue.use(Sticky);

    export default {
        name: "find",
        data(){
            return{
                state:null
            }
        },
        components:{
            BottomBar,
            DisTopBar
        },
        mounted(){
              new BScroll('.re-course', {
                scrollX: true,
                probeType: 0
                }),
        
                new BScroll('.teacher', {
                scrollX: true,
                probeType: 0
                })
            let spanList=Array.from(this.$refs.spanlist.children)
            spanList.forEach(i=>i.addEventListener('click',clickspanHanlder))
            
            function  clickspanHanlder(e){
                    spanList[0].style.color='#ccc'
                    spanList[0].style.background='#fff'

                if(self.state){
                    self.state.style.color='#ccc'
                    self.state.style.background='#fff'                
                }
                    self.state=this
                    self.state.style.background='linear-gradient(to right, #6d5eeb, #8b7cf4)'
                    self.state.style.color="#fff"                            
            }
        }
    }
</script>

<style lang='stylus' scoped>
.container
    overflow-y scroll
    overflow-x hidden 
    .re-nav
        height .3rem
        overflow hidden
        display flex 
        justify-content space-between
        margin-left .1rem
        margin-right .1rem 
        align-items flex-end
        h1
            font-size  .18rem
            
        span 
            font-weight 600
            font-size  .12rem
            text-align center 
            padding 0.06rem
            display block
            height .3rem
            width   .66rem
            color  #fff
            border-radius .3rem
            background linear-gradient(to right, #6d5eeb, #8b7cf4);
    .re-course
        overflow hidden
        padding-top .12rem
        width 3.62rem 
        margin-left .1rem      
        ul           
            height 2rem
            width max-content
            li:last-child
                margin-right 0
            li
                height 1.86rem
                width 1.28rem
                margin-right .16rem 
                float left
                .imgCon
                    border-radius .1rem 
                    overflow hidden 
                    position relative
                    height 1.54rem
                    img 
                        height 1.54rem
                        width 100%
                    span 
                         position absolute
                         bottom  .18rem
                         left .16rem
                         font-size .13rem
                         line-height .16rem
                         color #fff
                .user_name
                    padding-top .08rem
                    span 
                        display inline-block
                        height .2rem
                        line-height .2rem
                        padding-left .08rem
                        color #ccc
                        text-align center

    .teacher
        width 100% 
        padding 0 .14rem
        background-color #f9f9f9       
        ul            
            height  .82rem  
            width max-content
            li
                width 1.62rem
                height .72rem
                margin-right .1rem
                border-bottom-right-radius .2rem
                background-color #fff
                display flex 
                float left
                div:first-child
                    flex  70
                    display flex 
                    justify-content center
                    align-items center
                div:last-child 
                    flex 92
                    display flex 
                    flex-direction column
                    justify-content flex-start

                    h1
                        flex 1
                        color #373839
                        font-size .16rem
                        padding-top .16rem
                        position relative
                        span 
                            position absolute
                            top .12rem
                            left .65rem
                    span 
                        flex 1
                        color #d7ccd7
                        font-size .12rem
    .re-label
        padding  0 .08rem 
        height 1.16rem
        background-image: linear-gradient( #f8f8f8, #fff);
        h1
            font-size .16rem
        span 
            font-size .14rem
            height .28rem
            padding .02rem .13rem
            display inline-block
            margin .08rem .05rem 0 0
            border 1px solid  #f1f1f1
            border-radius .3rem
            color #ccc
            &:nth-of-type(1)
                background linear-gradient(to right, #6d5eeb, #8b7cf4)
    .course
        padding-left .1rem
        height .9rem
        li
            display flex 
            margin-bottom .1rem
            div:first-child
                flex 128
                border-radius .1rem
                width 1.28rem
                height 1.28rem
                overflow hidden
            div:last-child
                flex 232
                padding-left .1rem
                color #ccc
                font-size .12rem
                h1
                    font-size .18rem
                    color #383739
                    padding-top .08rem 
                span 
                    height .26rem
                    padding .03rem .13rem
                    display inline-block
                    margin .13rem .05rem 0 0
                    border 1px solid  #f1f1f1
                    border-radius .3rem
</style>
